<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <!-- <a-page-header title="返回" @back="() => $router.go(-1)" /> -->
    <a-form-model :model="info" ref="ruleForm" :rules="rules" @submit.native.prevent>
      <a-form-model-item label="推广链接名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="linkerName">
        <a-input size="large" v-model="info.linkerName" />
      </a-form-model-item>
      <a-form-model-item label="AppId" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="linkerAppId">
        <a-input size="large" v-model="info.linkerAppId" />
      </a-form-model-item>
      <a-form-model-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input size="large" v-model="info.linkerDesc" />
      </a-form-model-item>
      <a-form-model-item label="链接地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="linkerUrl">
        <a-input size="large" v-model="info.linkerUrl" />
      </a-form-model-item>
      <a-form-model-item label="所得积分" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="clickCredit">
        <a-input-number size="large" v-model="info.clickCredit" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-input-number size="large" v-model="info.sort" style="width: 200px" />
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{ span: 24 }" style="text-align: center">
        <a-button
          htmlType="submit"
          type="primary"
          :loading="state.submitBtn"
          :disabled="state.submitBtn"
          @click="onSubmit"
          >保存</a-button
        >
        <a-button style="margin-left: 8px" @click="() => $router.go(-1)">取消</a-button>
      </a-form-model-item>
    </a-form-model>
  </a-card>
</template>

<script>
// import pick from 'lodash.pick'

export default {
  name: 'SpreadAdd',
  data() {
    return {
      id: this.$route.params.id || '',
      info: {},
      rules: {
        linkerName: [{ required: true, message: '推广链接名称必填', trigger: ['blur', 'change'] }],
        linkerUrl: [
          {
            pattern: /^(((https?|ftp|news):\/\/|\w+(\.\w+)+)(:\w+)?).*/,
            message: '链接地址格式不正确',
            trigger: ['blur', 'change']
          }
        ]
      },
      state: {
        submitBtn: false
      },
      labelCol: { lg: { span: 7 }, sm: { span: 7 } },
      wrapperCol: { lg: { span: 10 }, sm: { span: 17 } }
    }
  },
  mounted() {
    // 获取信息
    this.formInit()
  },
  methods: {
    formInit() {
      // 获取信息
      if (this.id) {
        this.getInfo()
      } else {
        this.info = {
          linkerName: '',
          linkerUrl: '',
          sort: '',
          clickCredit: '',
          linkerDesc: ''
        }
      }
    },
    // 编辑信息
    getInfo() {
      this.$common.handleGet('/linkers/' + this.id).then((data) => {
        if (data.code === 200) {
          const result = data.data
          this.info = result
        } else {
          this.$message.error(data.message)
          // 跳转到目的路由
          this.$router.push({ name: 'SpreadList' })
        }
      })
    },

    // 提交
    onSubmit() {
      const { state, handleFormData } = this
      state.submitBtn = true
      // 验证表单
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.id ? handleFormData('/linkers/' + this.id) : handleFormData('/linkers/add')
        } else {
          setTimeout(() => {
            state.submitBtn = false
          }, 600)
        }
      })
    },
    // 表单数据处理
    handleFormData(url) {
      this.$common
        .handlePost(url, this.info)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message, 1, () => {
              // 跳转到目的路由
              this.$router.push({ name: 'SpreadList' })
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$notification.error({
            message: '错误',
            description: '请求信息失败，请重试'
          })
        })
        .finally(() => {
          this.state.submitBtn = false
        })
    }
  }
}
</script>
